html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#PageHeader1
{
   background-color: #F5F5F5;
   background-image: none;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#TextArea1
{
   box-sizing: border-box;
   border: 1px solid #CCCCCC;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   align-self: auto;
   text-align: left;
   padding: 4px 4px 4px 4px;
   margin: 0;
   overflow: auto;
   resize: none;
}
#TextArea1:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
#Editbox1
{
   border: 1px solid #C5C5C5;
   border-radius: 4px;
   background-color: #F6F6F6;
   background-image: none;
   color: #454545;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   box-sizing: border-box;
   line-height: 13px;
   margin: 0;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   align-self: auto;
   text-align: left;
   padding: 4px 4px 4px 4px;
}
#Editbox1:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
#Editbox2
{
   border: 1px solid #C5C5C5;
   border-radius: 4px;
   background-color: #F6F6F6;
   background-image: none;
   color: #454545;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   box-sizing: border-box;
   line-height: 13px;
   margin: 0;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   align-self: auto;
   text-align: left;
   padding: 4px 4px 4px 4px;
}
#Editbox2:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
#TextArea2
{
   box-sizing: border-box;
   border: 1px solid #CCCCCC;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   align-self: auto;
   text-align: left;
   padding: 4px 4px 4px 4px;
   margin: 0;
   overflow: auto;
   resize: none;
}
#TextArea2:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
#FlexGrid1
{
   display: grid;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-size: 0;
   grid-column-gap: 5px;
   grid-row-gap: 7px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 100px auto auto auto;
   grid-template-areas:
      "title title"
      "str str"
      "encode decode"
      "alls alls";
}
#FlexGrid1 .title
{
   display: flex;
   grid-area: title;
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
}
#FlexGrid1 .str
{
   display: flex;
   grid-area: str;
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
   align-content: center;
}
#FlexGrid1 .encode
{
   display: flex;
   grid-area: encode;
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
   align-content: center;
}
#FlexGrid1 .decode
{
   display: flex;
   grid-area: decode;
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
   align-content: center;
}
#FlexGrid1 .alls
{
   display: flex;
   grid-area: alls;
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   padding: 0;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
   align-content: center;
}
#Button1
{
   box-sizing: border-box;
   line-height: 36px;
   text-decoration: none;
   vertical-align: top;
   border: 1px solid #2E6DA4;
   border-radius: 4px;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   -webkit-appearance: none;
   margin: 0;
}
}
#Button1:focus
{
   outline: 0;
}
#Button2
{
   box-sizing: border-box;
   line-height: 36px;
   text-decoration: none;
   vertical-align: top;
   border: 1px solid #2E6DA4;
   border-radius: 4px;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
   padding: 1px 6px 1px 6px;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
   -webkit-appearance: none;
   margin: 0;
}
}
#Button2:focus
{
   outline: 0;
}
#wb_Heading2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   margin: 0;
   padding: 0;
   text-align: center;
}
#Heading2
{
   color: #000000;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 32px;
   margin: 0;
   text-align: center;
}
#wb_Heading1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   margin: 0;
   padding: 0;
   text-align: center;
   flex-grow: 0;
   flex-shrink: 0;
   align-self: auto;
}
#Heading1
{
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 27px;
   margin: 0;
   text-align: center;
}
#TextArea3
{
   box-sizing: border-box;
   border: 1px solid #CCCCCC;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
   align-self: auto;
   text-align: left;
   padding: 4px 4px 4px 4px;
   margin: 0;
   overflow: auto;
   resize: none;
}
#TextArea3:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
